<!--
 * @Author: your name
 * @Date: 2020-12-28 11:32:50
 * @LastEditTime: 2020-12-30 22:11:33
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \H5 2010 studyd:\H5 2010 练习\第三阶段 Vue + node\DAY 7\panda\src\views\home\index.vue
-->
<template>
  <div class="home">
    <!-- 主页
    <br />
    <br />
    <router-link to="/">首页</router-link> |
    <router-link to="/mine">个人中心</router-link> |
    <router-link to="/detail">详情</router-link> |
    <router-link to="/cart">购物车</router-link> |
    <router-link to="/category">分类</router-link> -->

    <van-tabs>
      <van-tab
        v-for="category in categories"
        :key="category.id"
        :title="category.name"
      >
      </van-tab>
    </van-tabs>

    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      :height="150">
      <van-swipe-item
        v-for="banner in banners"
        :key="banner.id"
      >
        <img
         v-lazy="banner.imageUrl"
         :style="{width: '100%', height: '100%'}"
        />
      </van-swipe-item>
    </van-swipe>

    <van-divider>小编精选，全场特惠 (ง •̀_•́)ง</van-divider>

    <!-- 推荐商品 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      class="prod-list"
    >
      <div
        v-for="prod in items"
        :key="prod.id"
        class="prod-item"
        @click="jumpDetail(prod.id)"
      >
        <img v-lazy="prod.image">
        <div class="prod-desc">
          <p class="prodTitle">{{ prod.title }}</p>
          <div class="price-incart">
            <span class="prod-price">{{ prod.price | money}}</span>
            <van-button size="mini" type="danger" @click.stop="addCartHandler(prod)">
              加入购物车
            </van-button>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import { getMore, getCategories, getHomePageData } from '@/api/home'
import { Toast } from 'vant'

export default {
  name: 'Home',
  data() {
    return {
      banners: [], // 轮播图数据
      categories: [], // 分类数据
      items: [], // 推荐商品数据
      loading: true, // 是否正在加载数据
      finished: false, // 数据是否全部加载完毕
      nextIndex: 0 // 下一页数据查询时的起始索引
    }
  },
  created() {
    getHomePageData() // 当时返回的是一个 promise 对象，可以使用then
      .then(res => {
        // console.log('首页数据:', res)

        // 更新 banners 数据 (轮播图数据)
        this.banners = res.banners
        // 优化第一次请求数据
        this.items = res.items.list.filter(item => item.type === 1)
        this.nextIndex = res.items.nextIndex
        this.finished = res.items.isEnd
        this.loading = false
      })

    getCategories()
      .then(res => {
        // console.log('分类数据：', res)

        // 更新 category 数据 (分类数据)
        this.categories = res
      })
  },
  methods: {
    onLoad() {
      // 调用方法，加载更多商品
      getMore(this.nextIndex)
        .then(res => {
          // console.log('更多数据：', res)

          // 更新 items 数据 (推荐商品数据)
          // this.items = res

          // 将加载的商品数据追加到 items 数组中
          const list = res.list.filter(prod => prod.type === 1)
          this.items = [...this.items, ...list]
          // 将 nextIndex 作为下次开始的根据
          this.nextIndex = res.nextIndex
          this.loading = false
          this.finished = res.isEnd
        })
    },
    // 跳转到 详情页
    jumpDetail(id) {
      this.$router.push('/detail?id=' + id)
    },
    // 添加到 购物车
    addCartHandler(prod) {
      const { id, title, image, price } = prod
      const current = {
        id,
        title,
        image,
        price,
        count: 1 // 默认选购数量 1
      }

      // 保存到 Vuex 中
      this.$store.commit('cart/add', current)
      Toast.success(
        {
          message: '已添加到购物车',
          duration: 600
        }
      )
    }
  }
}

</script>

<style lang="scss" scoped>
.prod-list{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .prod-item{
    width: 48%;
    margin: 10px 0;

    img{
      width: 100%;
      height: 180.9px;
    }
  }
}

.prod-desc{
  padding: 10px;

  .prodTitle{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0;
    color: #877a73;
    font-size: 12px;
  }

  .price-incart{
    margin-top:5px ;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

</style>
